<template>
    <div class="container" ref="chartRef" style="height:300px"></div>
</template>
<script setup>
// 使用echarts
//1.安装
//2.引入
import * as echarts from "echarts"
import { onMounted } from "vue";
import * as api from "@/api/charts"
//3.需要一个dom容器,这个容器一定要设置高度
let chartRef = ref(null)
//4.初始化
onMounted(async () => {
    //确保dom已经被挂载
    let myChart = echarts.init(chartRef.value);
    //5.选项配置配置

    //通过异步请求获取数据
    myChart.showLoading()//显示加载动画
    let res = await api.expectApi()
    myChart.hideLoading()//隐藏加载动画
    // console.log(res)
    //系列中的数据
    let data = []
    //处理数据
    let categoryData = res.data.map(item => {
        data.push(item.rate)
        return item.name
    })
    // console.log(data,categoryData)
    myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        legend: {},
        //坐标提示工具
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            },
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            extraCssText: 'width: 170px'
        },
        //x轴
        xAxis: {
            show: false,
            data: categoryData
        },
        //y轴
        yAxis: {
            show: false
        },
        series: [
            {
                name: '期望',
                type: 'line',
                smooth: true,
                data: data,
                label: {
                    show: true,
                    formatter:"{b}:{c}%",
                    color:"hotpink",
                    fontSize:"20px"
                }
            }
        ]
    })
})
</script>

<script>
export default {
    //自己定义的属性
    meta: {
        key: "数据统计",
        icon: "icon-tongji"
    }
}
</script>